<template>
  <div class="approve-detail-page">
    <el-card class="main-card">
      <!-- 顶部返回和操作 -->
      <div class="header-row">
        <el-button @click="goBack">返回</el-button>
        <div class="title-block">
          <el-avatar :size="80" src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane" />
          <div>
            <div class="main-title">{{ detail.title }}</div>
            <div class="sub-title">审批编号：{{ detail.approvalNumber }}</div>
          </div>
        </div>
        <div class="action-block">
          <el-button type="primary" :loading="loading" @click="approve(detail.approvalId)">同意</el-button>
          <el-button type="danger" :loading="loading" @click="refused(detail.approvalId)">拒绝</el-button>
          <el-button type="info" @click="transferBtn">转交</el-button>
        </div>
      </div>

      <!-- 审批信息 -->
      <div class="info-section">
        <div class="info-title">
          <el-icon><i class="el-icon-info"></i></el-icon>
          审批信息
        </div>
        <el-descriptions :column="2" border>
          <template v-for="item in infoFields" :key="item.label">
            <el-descriptions-item :label="item.label">{{ item.value }}</el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 右侧流程，保持不变 -->
    <div class="side-card">
      <div class="info-title">
        <el-icon><i class="el-icon-s-operation"></i></el-icon>
        审批流程
      </div>
      <el-timeline>
        <el-timeline-item :timestamp="detail.initiateTime"
            :color="detail.status === 'pending' ? '#67C23A' : '#909399'">
            <span>{{ detail.employeeName }}</span>
        </el-timeline-item>
        <el-timeline-item :color="detail.status != 'pending' ? '#67C23A' : '#909399'">
            <span>{{ detail.approverName }}</span>
            <span v-if="detail.status">（{{ detail.status }}）</span>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 转交弹窗 -->
    <el-dialog v-model="DialogVisible" title="转交对象" width="400px" :close-on-click-modal="false" @close="resetTransfer">
      <el-radio-group v-model="Target" class="move-radio-group" @change="handleRadioChange">
        <el-radio v-for="approver in approvers" :key="approver.userId" :label="approver.userId" border>
          {{ approver.userName }}
        </el-radio>
        <el-radio label="其它" border>其它</el-radio>
      </el-radio-group>
      <template #footer>
        <el-button @click="DialogVisible = false">取消</el-button>
        <el-button type="primary" :disabled="!Target" @click="confirmMove">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { agree, refuse, transfer, getApprovers } from '@/api/approval/approvalManagement/approvalManagement'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const DialogVisible = ref(false)
const approvers = ref([])
const Target = ref('')
const selectedNextApproverId = ref('')
const detail = ref({ flow: [] })

// 兼容 query/params 传参，初始化 detail
onMounted(() => {
  detail.value = { ...route.query, ...route.params, flow: route.query.flow || route.params.flow || [] }
  getApprovers().then(res => {
    approvers.value = res.rows || []
  })
})

function goBack() {
  router.back()
}

function approve(id) {
  loading.value = true
  agree({ id }).then(() => refresh()).finally(() => (loading.value = false))
}
function refused(id) {
  loading.value = true
  refuse({ id }).then(() => refresh()).finally(() => (loading.value = false))
}
function refresh() {
  location.reload()
}

function transferBtn() {
  DialogVisible.value = true
}
function confirmMove() {
  DialogVisible.value = false
  transfer({ id: detail.value.approvalId, nextId: Target.value }).then(() => refresh())
}
function resetTransfer() {
  Target.value = ''
  selectedNextApproverId.value = ''
}
function handleRadioChange(value) {
  selectedNextApproverId.value = value
}

// 动态生成审批信息栏字段
const infoFields = computed(() => {
  const t = detail.value.typeName || detail.value.type
  switch (t) {
    case '入职':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '手机号码', value: detail.value.phone },
        { label: '入职部门', value: detail.value.deptName },
        { label: '预计入职时间', value: detail.value.startTime },
        { label: '转正时间', value: detail.value.endTime },
        { label: '试用期', value: detail.value.field3 },
        { label: '员工类型', value: detail.value.employeeType },
        { label: '员工状态', value: detail.value.typeName }
      ]
    case '转正':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '理由', value: detail.value.content },
        { label: '发起人', value: detail.value.employeeType },
        { label: '审批状态', value: detail.value.status }
      ]
    case '离职':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '请假类型', value: detail.value.typeName },
        { label: '理由', value: detail.value.content },
        { label: '发起人', value: detail.value.employeeType },
        { label: '审批状态', value: detail.value.status }
      ]
    case '调薪':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '理由', value: detail.value.content },
        { label: '新薪资', value: detail.value.salary },
        { label: '发起人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '请假':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '请假类型', value: detail.value.typeName },
        { label: '请假理由', value: detail.value.content },
        { label: '请假开始时间', value: detail.value.startTime },
        { label: '请假结束时间', value: detail.value.endTime },
        { label: '请假时长（h）', value: detail.value.field2 },
        { label: '发起人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '调岗':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '理由', value: detail.value.content },
        { label: '原岗位', value: detail.value.deptName },
        { label: '调动部门', value: detail.value.field2 },
        { label: '发起人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '外出':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '外出理由', value: detail.value.content },
        { label: '外出开始时间', value: detail.value.startTime },
        { label: '外出结束时间', value: detail.value.endTime },
        { label: '请假时长（h）', value: detail.value.field2 },
        { label: '发起人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '加班':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '加班原因', value: detail.value.content },
        { label: '加班开始时间', value: detail.value.startTime },
        { label: '加班结束时间', value: detail.value.endTime },
        { label: '加班时长（h）', value: detail.value.field2 },
        { label: '加班人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '出差':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '出差原因', value: detail.value.content },
        { label: '目的城市', value: detail.value.field1 },
        { label: '交通工具', value: detail.value.field3 },
        { label: '出差开始时间', value: detail.value.startTime },
        { label: '出差结束时间', value: detail.value.endTime },
        { label: '出差时长（天）', value: detail.value.field2 },
        { label: '申请人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    case '补卡':
      return [
        { label: '审批编号', value: detail.value.approvalNumber },
        { label: '补卡理由', value: detail.value.content },
        { label: '应打卡时间', value: detail.value.startTime },
        { label: '补卡时间', value: detail.value.endTime },
        { label: '申请人', value: detail.value.employeeName },
        { label: '审批状态', value: detail.value.status }
      ]
    default:
      return []
  }
})
</script>


<style scoped>
.approve-detail-page {
    display: flex;
    gap: 24px;
    padding: 32px 24px;
    background: #f7f8fa;
    min-height: 100vh;
}

.main-card {
    flex: 2;
    padding: 32px;
    border-radius: 12px;
    background: #fff;
    min-width: 0;
}

.header-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.title-block {
    display: flex;
    align-items: center;
    gap: 16px;
}
.move-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
.main-title {
    font-size: 22px;
    font-weight: 600;
}

.sub-title {
    color: #888;
    margin-top: 4px;
}

.action-block {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.info-section {
    margin-top: 32px;
}

.info-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    height: fit-content;
}
</style>